<template>
  <div class="contentBox width100 flex-row flex-wrap">
    <div
      class="contentItem rela flex_1"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="flex-row row-between" @click="onEmit(item)">
        <div class="contentItem_l">
          <div class="text-gray font-12 text-dark-gray">{{ item.sqName }}</div>
          <div class="font-36 margin-t-10" :style="{ color: item.color }">
            {{ item.progress }}<span class="font-14 text-gray">{{unit}}</span>
          </div>
        </div>
        <div
          class="contentItem_r font-12 text-right"
          :style="{ color: item.state == 'rise' ? '#25D17F' : '#FF4444' }"
        >
          <template v-if="item.state == 'rise'">
            <img src="../../assets/images/rise.png" class="trendImg" />
            <span
              :style="{ color: item.state == 'rise' ? '#25D17F' : '#FF4444' }"
              >增长
            </span>
            <br />
            {{ item.stateVal }}%
          </template>
          <template v-else>
            <img src="../../assets/images/decline.png" class="trendImg" />
            <span
              :style="{ color: item.state == 'rise' ? '#25D17F' : '#FF4444' }"
              >下降
            </span>
            <br />
            {{ item.stateVal }}%
          </template>
          <img :src="item.barImg" class="width100 margin-t-10" />
        </div>
      </div>
      <LineProgress1
        class="margin-t-10"
        :percentage="item.progress"
        :roundLeft="6"
        :showtext="false"
        :strokeWidth="10"
      ></LineProgress1>
      <div class="line abso" v-if="item.lineShow"></div>
    </div>
  </div>
</template>

<script>
import LineProgress1 from './lineProgress1.vue'
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    unit: {
      type: String,
      default :'%'
    }
  },
  components: {
    LineProgress1
  },
  data () {
    return {}
  },
  methods:{
     // 部门不满意统计
    onEmit(item){
      this.$emit("Dissatisfied", item);
    }
  }
}
</script>

<style lang="less" scoped>
.contentItem {
  width: calc((100% - 180px) / 4);
  .contentItem_r {
    width: 73px;
    .trendImg {
      width: 10px;
      margin-right: 5px;
    }
  }
  .progressBox {
    margin-top: 20px !important;
  }
  .line {
    width: 1px;
    height: 120px;
    background: #f2f2f2;
    top: 0;
    right: -30px;
  }
}
.flex_1 {
  flex: 1;
}
</style>
